<template >
 <div id="mask" :class="{show: isMenuVisible}" >
    <div class="background"></div>
  </div>
  <div id="top">
    <div class="w640">
      <div class="title">
        <h3 id="title">{{ goods.name }}</h3>
      </div>
      <div class="icon_link left">
        <a href="javascript:window.history.back()">
          <i class="iconfont icon-arrows_left"></i>
        </a>
      </div>
      <div class="icon_link right">
        <a href="javascript:void(0)" @click="showMenu">
          <i class="iconfont icon-menu_learn"></i>
        </a>
      </div>
      <div id="menu" ref="menu">
        <!-- 菜单页面 -->
        <menuIndex></menuIndex>
      </div>
    </div>
  </div>
  <div id="app" class="product_page">
    <div id="product_gallery">
      <!-- 轮播图 -->
      <el-carousel height="500px">
            <el-carousel-item v-for="picture in goods.mainPictures" :key="picture.id">
              <img :src="picture" alt="">
            </el-carousel-item>
        </el-carousel>   
    </div>
    <div class="price_table">
      <dl>
        <dt>现价</dt>
        <dd id="pricenew">{{goods.price}}</dd>
      </dl>
      <dl>
        <dt>原价</dt>
        <dd><del id="price">{{ goods.oldPrice }}</del></dd>
      </dl>
    </div>
    <div class="details">
      <div class="title">
        <span @click="toggleProperties"><i class="iconfont icon-banbenjiance"></i>点击查看商品参数</span>
      </div>
      <div v-show="showProper" v-for=" proper in goods.details.properties" :key="proper.id" >
        {{ proper }}
      </div>
      <el-input-number v-model="count"  @change="handleChange" />
    </div>
    <div class="h20"></div>
    <h1 class="title">
      <b>Information</b>
      <span>商品详情</span>
    </h1>
    <div class="information">
    </div>
    <div v-for="img in goods.details.pictures" :key="img.id" >
      <img :src="img" alt="">
    </div>
  </div>
  <div id="nav">
    <div class="w640 buy_buttons">
      <a href="javascript:addFav(201)"><button class="white"><i class="iconfont icon-collect_line"></i>加收藏</button></a>
      <RouterLink to="/Cart" id="buynow"><button class="green" @click="buyNow"><i class="iconfont icon-cart"></i>立即购买</button></RouterLink to="/Cart">
    </div>
  </div>   
</template>

<script lang="ts" setup name="product">
import { ref,onMounted, toRefs} from "vue";
import useProductStore from "@/store/modules/product"
const ProductStore=useProductStore()
import {useCartStore} from "@/store/modules/cart"
const CartStore=useCartStore()
import { useRoute,useRouter } from "vue-router";
const $route=useRoute()
const $router=useRouter()
//引入菜单
import menuIndex from "@/components/menu/index.vue"
//切换遮罩层响应式数据
const menu = ref<HTMLElement | null>(null);
const  isMenuVisible =ref<boolean>(false)
//获取商品详情
const {goods}:any=toRefs(ProductStore)
onMounted(() =>ProductStore.getGoods($route.params.id))
//点击按钮遮罩层切换
const showMenu = () => {
  if (menu.value ) {
    menu.value.classList.toggle('show');
    isMenuVisible.value = !isMenuVisible.value;
  }
};
//数学输入框
const count =ref(1)
const handleChange =()=>{

}
//点击查看商品参数显示与隐藏
const showProper =ref(false)
const toggleProperties=()=>{
 showProper.value=!showProper.value
}
//点击立即购买跳转购物列表回调
const buyNow =()=>{
  CartStore.addCartList({
      id: goods.value.id,
      name: goods.value.name,
      picture: goods.value.mainPictures[0],
      price: goods.value.price,
      count: count.value,
      skuId: goods.value.spuCode,
      attrsText: goods.value.desc,
      selected: true,
      oldPrice:goods.value.oldPrice
        })
  $router.push('/cart')
}
</script>
<style scoped>
 
 #mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>